<!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->
<link rel="import" href="../../polymer/lib/elements/dom-module.html">
<link rel="import" href="../../polymer/lib/utils/html-tag.html">

<script>
  const VaadinGridStyles = document.createElement('dom-module');

  // NOTE(web-padawan): https://github.com/vaadin/vaadin-grid/issues/1514
  VaadinGridStyles.appendChild(
    Polymer.html`
    <style>
      @keyframes vaadin-grid-appear {
        to {
          opacity: 1;
        }
      }

      :host {
        display: block;
        animation: 1ms vaadin-grid-appear;
        height: 400px;
        flex: 1 1 auto;
        align-self: stretch;
        position: relative;
      }

      :host([hidden]) {
        display: none !important;
      }

      #scroller {
        display: block;
        transform: translateY(0);
        width: auto;
        height: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      :host([height-by-rows]) {
        height: auto;
        align-self: flex-start;
        flex-grow: 0;
        width: 100%;
      }

      :host([height-by-rows]) #scroller {
        width: 100%;
        height: 100%;
        position: relative;
      }

      #table {
        display: block;
        width: 100%;
        height: 100%;
        overflow: auto;
        z-index: -2;
        position: relative;
        outline: none;
      }

      #header {
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
      }

      th {
        text-align: inherit;
      }

      /* Safari doesn't work with "inherit" */
      [safari] th {
        text-align: initial;
      }

      #footer {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
      }

      #items {
        display: block;
        width: 100%;
        position: relative;
        z-index: -1;
      }

      #items,
      #outersizer,
      #fixedsizer {
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
      }

      [part~="row"] {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
      }

      [part~="row"][loading] [part~="body-cell"] ::slotted(vaadin-grid-cell-content) {
        opacity: 0;
      }

      #items [part~="row"] {
        position: absolute;
      }

      #items [part~="row"]:empty {
        height: 1em;
      }

      [part~="cell"]:not([part~="details-cell"]) {
        flex-shrink: 0;
        flex-grow: 1;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        position: relative;
        align-items: center;
        padding: 0;
        white-space: nowrap;
      }

      [part~="details-cell"] {
        position: absolute;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
      }

      [part~="cell"] ::slotted(vaadin-grid-cell-content) {
        display: block;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      [hidden] {
        display: none !important;
      }

      [frozen] {
        z-index: 2;
        will-change: transform;
      }

      #outerscroller {
        /* Needed (at least) for Android Chrome */
        z-index: 0;
      }

      #scroller:not([safari]) #outerscroller {
        /* Needed for Android Chrome (#1020). Can't be applied to Safari
        since it would re-introduce the sub-pixel overflow bug (#853) */
        will-change: transform;
      }

      [no-scrollbars]:not([safari]):not([firefox]) #outerscroller,
      [no-scrollbars][safari] #table,
      [no-scrollbars][firefox] #table {
        overflow: hidden;
      }

      [no-scrollbars]:not([safari]):not([firefox]) #outerscroller {
        pointer-events: none;
      }

      /* Reordering styles */
      :host([reordering]) [part~="cell"] ::slotted(vaadin-grid-cell-content),
      :host([reordering]) [part~="resize-handle"],
      #scroller[no-content-pointer-events] [part~="cell"] ::slotted(vaadin-grid-cell-content) {
        pointer-events: none;
      }

      [part~="reorder-ghost"] {
        visibility: hidden;
        position: fixed;
        pointer-events: none;
        opacity: 0.5;

        /* Prevent overflowing the grid in Firefox */
        top: 0;
        left: 0;
      }

      :host([reordering]) {
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }

      #scroller[ie][column-reordering-allowed] [part~="header-cell"] {
        -ms-user-select: none;
      }

      :host([reordering]) #outerscroller {
        -webkit-overflow-scrolling: auto !important;
      }

      /* Resizing styles */
      [part~="resize-handle"] {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        cursor: col-resize;
        z-index: 1;
      }

      [part~="resize-handle"]::before {
        position: absolute;
        content: "";
        height: 100%;
        width: 35px;
        transform: translateX(-50%);
      }

      [last-column] [part~="resize-handle"]::before,
      [last-frozen] [part~="resize-handle"]::before {
        width: 18px;
        transform: none;
        right: 0;
      }

      #scroller[column-resizing] {
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }

      /* Sizer styles */
      .sizer {
        display: flex;
        position: relative;
        width: 100%;
        visibility: hidden;
      }

      .sizer [part~="details-cell"] {
        display: none !important;
      }

      .sizer [part~="cell"][hidden] {
        display: none !important;
      }

      .sizer [part~="cell"] {
        display: block;
        flex-shrink: 0;
        line-height: 0;
        margin-top: -1em;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
      }

      .sizer [part~="cell"]::before {
        content: "-";
      }

      .sizer [part~="cell"] ::slotted(vaadin-grid-cell-content) {
        display: none !important;
      }

      /* Fixed mode (Tablet Edge) */
      #fixedsizer {
        position: absolute;
      }

      :not([edge][no-scrollbars]) #fixedsizer {
        display: none;
      }

      [edge][no-scrollbars] {
        /* Any value other than ‘none’ for the transform results in the creation of both a stacking context and
        a containing block. The object acts as a containing block for fixed positioned descendants. */
        transform: translateZ(0);
        overflow: hidden;
      }

      [edge][no-scrollbars] #header,
      [edge][no-scrollbars] #footer {
        position: fixed;
      }

      [edge][no-scrollbars] #items {
        position: fixed;
        width: 100%;
        will-change: transform;
      }

      /* RTL specific styles */

      :host([dir="rtl"]) [part~="reorder-ghost"] {
        left: auto;
        right: 0;
      }

      :host([dir="rtl"]) [part~="resize-handle"] {
        left: 0;
        right: auto;
      }

      :host([dir="rtl"]) [part~="resize-handle"]::before {
        transform: translateX(50%);
      }

      :host([dir="rtl"]) [last-column] [part~="resize-handle"]::before,
      :host([dir="rtl"]) [last-frozen] [part~="resize-handle"]::before {
        left: 0;
        right: auto;
      }
    </style>
  `);

  const safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  const firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

  if (safari || firefox) {
    const scrollingStyles = document.createElement('style');
    scrollingStyles.textContent = `
      [scrolling][safari] #outerscroller,
      [scrolling][firefox] #outerscroller {
        pointer-events: auto;
      }

      [ios] #outerscroller {
        pointer-events: auto;
        z-index: -3;
      }

      [ios][scrolling] #outerscroller {
        z-index: 0;
      }

      [ios] [frozen] {
        will-change: auto;
      }
    `;
    VaadinGridStyles.querySelector('template').content.appendChild(scrollingStyles);
  }

  VaadinGridStyles.register('vaadin-grid-styles');
</script>
